<template>
  <div>
    <el-tooltip :open-delay="1000" popper-class="tootipdiv" class="item" :disabled="Array.isArray(rowData[scriptItem.valueFields])&&rowData[scriptItem.valueFields].length===0||!rowData[scriptItem.valueFields]" effect="dark" placement="top">
      <div class="tootipdv" slot="content" style="max-height:300px;overflow:auto" v-html="tootipHander(rowData[scriptItem.valueFields],rowData.options,allValueList[rowData[scriptItem.keyFields]])"></div>
      <div style="float: left"
        :style="{ width: scriptItem.valueFieldsWidth }">
      <div v-if="(filterType==='boolean'||filterType==='booleanFlag') && !isConditionFormat"
          style="width: 100%;">
        <el-select v-model="rowData[scriptItem.valueFields]"
                  clearable
                  style="width: 100%"
                  :disabled="rowData.disabled||valueFieldDisabled(rowData[scriptItem.optionFields])">
          <el-option :label="'True'"
                    :value="true"></el-option>
          <el-option :label="'False'"
                    :value="false"></el-option>
        </el-select>
      </div>
      <div v-else-if="(filterType==='text' || filterType==='user' || isConditionFormat) && isAutoTaskStatus === 'empty'"
          style="width: 100%">
        <template v-if="valueIsOldData(rowData[scriptItem.valueFields])">
          <el-input type="text"  clearable
                    style="width: 100%"
                    v-model="rowData[scriptItem.valueFields]"
                    :disabled="rowData.disabled||valueFieldDisabled(rowData[scriptItem.optionFields])"></el-input>
        </template>
        <template v-else>
          <el-select v-model="rowData[scriptItem.valueFields]"
                    style="width: 100%"
                     ref="fuzzySearch"
                    :multiple="rowData[scriptItem.optionFields] === 'in' || rowData[scriptItem.optionFields] === 'not in'  || rowData[scriptItem.optionFields] === 'notIn'  || rowData[scriptItem.optionFields] === 'or'|| rowData[scriptItem.optionFields] === 'notin'"
                    :remote="(nextTicketType==='jira'&&isRemoteObject[rowData[scriptItem.keyFields]]&&isRemoteObject[rowData[scriptItem.keyFields]]===100)||nextTicketType!=='jira'"
                    clearable
                    :disabled="valueFieldDisabled(rowData[scriptItem.optionFields])||rowData[scriptItem.optionFields] ==='changed'"
                    reserve-keyword
                    :remote-method="remoteMethod"
                    @focus="setTempField(rowData[scriptItem.keyFields])"
                    @blur="clearTempField"
                    size="small"
                    collapse-tags
                    filterable
                    default-first-option
                    automatic-dropdown
                    allow-create>
            <el-option v-for="(fieldItem,fieldIndex) in allValueList[rowData[scriptItem.keyFields]]"
                      :key="fieldIndex"
                      :label="fieldItem.name"
                      :value="fieldItem.id">
                      </el-option>
          </el-select>
        </template>
      </div>
      <div v-else-if="filterType==='number' && !isConditionFormat && isAutoTaskStatus === 'empty'"
          style="width: 100%;">
        <template v-if="valueIsOldData(rowData[scriptItem.valueFields])">
          <el-input style="width: 100%"
                    type="text" clearable
                    v-model="rowData[scriptItem.valueFields]"
                    :disabled="rowData.disabled||valueFieldDisabled(rowData[scriptItem.optionFields])"></el-input>
        </template>
        <template v-else>
            <el-select v-model="rowData[scriptItem.valueFields]"
                      style="width: 100%"
                       ref="fuzzySearch"
                      :multiple="rowData[scriptItem.optionFields] === 'in' || rowData[scriptItem.optionFields] === 'not in'  || rowData[scriptItem.optionFields] === 'notIn' || rowData[scriptItem.optionFields] === 'or'|| rowData[scriptItem.optionFields] === 'notin'"
                      clearable
                      :remote="(nextTicketType==='jira'&&isRemoteObject[rowData[scriptItem.keyFields]]&&isRemoteObject[rowData[scriptItem.keyFields]]===100)||nextTicketType!=='jira'"
                      :disabled="valueFieldDisabled(rowData[scriptItem.optionFields])"
                      reserve-keyword
                      :remote-method="remoteMethod"
                      @focus="setTempField(rowData[scriptItem.keyFields])"
                      @blur="clearTempField"
                      size="small"
                      collapse-tags
                      filterable
                      @change="checkboxGroupChange"
                      default-first-option
                      allow-create>
              <template v-if="rowData[scriptItem.optionFields] === 'in' || rowData[scriptItem.optionFields] === 'not in'">
                <el-checkbox-group v-model="rowData[scriptItem.valueFields]" @change="checkboxGroupChange">
                  <el-option v-for="(fieldItem,fieldIndex) in allValueList[rowData[scriptItem.keyFields]]"
                            :key="fieldIndex"
                            :label="fieldItem.name"
                            :value="fieldItem.id">
                            </el-option>
                </el-checkbox-group>
              </template>
              <template v-else>
                <el-option v-for="(fieldItem,fieldIndex) in allValueList[rowData[scriptItem.keyFields]]"
                      :key="fieldIndex"
                      :label="fieldItem.name"
                      :value="fieldItem.id">
                      </el-option>
              </template>

            </el-select>
        </template>
      </div>
      <div v-else-if="(filterType==='datetime'||filterType==='date') && !isConditionFormat && isAutoTaskStatus === 'empty'"
          style="width: 100%;">
        <el-popover v-model="datetimeStatus"
                    ref="datetime-popover"
                    :disabled="valueFieldDisabled(rowData[scriptItem.optionFields])"
                    >
          <el-input style="width: 100%;"
                    slot="reference" clearable
                    v-model="rowData[scriptItem.valueFields]"
                    :placeholder="scriptItem.valueHint"
                    :disabled="valueFieldDisabled(rowData[scriptItem.optionFields])"
                    readonly></el-input>
          <el-tabs v-if="optValue === 'timeofday'" v-model='timeTabs'>
            <el-tab-pane label="Time"
                        name="Time">
              <el-time-picker
                is-range
                v-model="timeOfDayValStart"
                range-separator="-"
                format="HH:mm"
                value-format="HH:mm"
                start-placeholder="Start time"
                end-placeholder="End time"
                placeholder="">
              </el-time-picker>
            </el-tab-pane>
          </el-tabs>
          <el-tabs v-model='datetimeTabs' v-else>          
          <el-tab-pane label="Time"
                      v-if="optValue !== 'in'"
                      name="time">
            <el-date-picker v-model="datePickerValue"
                            :type="nextTicketType === 'jira'&&rowData.type === 'date'?'date':'datetime'"
                            :value-format="nextTicketType === 'jira'&&rowData.type === 'date'?'yyyy-MM-dd':'yyyy-MM-dd HH:mm:ss'">
            </el-date-picker>
          </el-tab-pane>

          </el-tabs>
          <el-row style="margin-top: 10px">
            <el-col :span="24"
                    style="text-align:right;">
              <el-button size="mini"
                        @click="clearDatetime">Clear</el-button>
              <el-button type="primary"
                        size="mini"
                        @click="saveDatetime()">Save</el-button>
            </el-col>
          </el-row>
        </el-popover>
      </div>
      <div v-else-if="filterType==='gadget_domain' && scriptItem.valueObject.options && !isConditionFormat && isAutoTaskStatus === 'empty'"
          style="width: 100%;">
        <el-select v-model="rowData[scriptItem.valueFields]"
                  style="width: 100%"
                  filterable clearable
                  allow-create
                  :disabled="valueFieldDisabled(rowData[scriptItem.optionFields])"
                  default-first-option
                  @change="selectChange()">
          <el-option v-for="(option,index) in scriptItem.valueObject.options"
                    :key="index"
                    :label="option.label"
                    :value="option.value">
                                <div class="more" style="display:inline-block">{{ fieldItem }}</div>
          </el-option>
        </el-select>
      </div>
      <div v-else-if="filterType==='create_date' && !isConditionFormat && isAutoTaskStatus === 'empty'"
          style="width: 100%;">
        <el-date-picker v-model="rowData[scriptItem.valueFields]"
                        align="right"
                        type="date"
                        :disabled="valueFieldDisabled(rowData[scriptItem.optionFields])"
                        placeholder="Select date"
                        :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <div v-else-if="isAutoTaskStatus === 'autoTask_nextTicket'"
          style="width: 100%;he:66">
        <el-select v-model="rowData[scriptItem.valueFields]"
                  style="width: 100%"
                  clearable
                  filterable
                  :disabled="rowData.disabled||valueFieldDisabled(rowData[scriptItem.optionFields])"
                  :multiple="rowData[scriptItem.optionFields] === 'in' || rowData[scriptItem.optionFields] === 'not in' || rowData[scriptItem.optionFields] === 'notIn' || rowData[scriptItem.optionFields] === 'or'"
                  allow-create
                   collapse-tags
                  @change="autoTaskCheckboxGroupChange"
                  default-first-option>
          <el-option v-for="(option,index) in rowData.options"
                    :key="index"
                    :label="option.name"
                    :value="option.id">
          </el-option>
        </el-select>
      </div>
        <div v-else-if="isAutoTaskStatus === 'syncro_nextTicket_status'"
             style="width: 100%;he:66">
          <el-select v-model="rowData[scriptItem.valueFields]"
                     style="width: 100%"
                     clearable
                     filterable
                     :disabled="rowData.disabled||valueFieldDisabled(rowData[scriptItem.optionFields])"
                     :multiple="rowData[scriptItem.optionFields] === 'in' || rowData[scriptItem.optionFields] === 'not in' || rowData[scriptItem.optionFields] === 'notIn'"
                     allow-create
                     collapse-tags
                     default-first-option>
            <el-option v-for="(option,index) in rowData.options"
                       :key="index"
                       :label="option.name"
                       :value="option.id">
            </el-option>
          </el-select>
        </div>
      <div v-else-if="isAutoTaskStatus === 'cw_nextTicket'"
          style="width: 100%;">
        <el-select v-model="rowData[scriptItem.valueFields]"
                  style="width: 100%"
                  clearable
                  filterable
                  :disabled="rowData.disabled||valueFieldDisabled(rowData[scriptItem.optionFields])"
                  allow-create
                   collapse-tags
                  :multiple="rowData[scriptItem.optionFields] === 'in' || rowData[scriptItem.optionFields] === 'not in' || rowData[scriptItem.optionFields] === 'notIn'"
                  default-first-option>
          <el-option v-for="(option,index) in rowData.options"
                    :key="index"
                    :label="option.name"
                    :value="option.id">
          </el-option>
        </el-select>
      </div>
      <div v-else-if="isAutoTaskStatus === 'cw_nextTicket_company'"
           style="width: 100%;">
        <el-select v-model="rowData[scriptItem.valueFields]"
                   style="width: 100%"
                    ref="fuzzySearch"
                   :multiple="rowData[scriptItem.optionFields] === 'in' || rowData[scriptItem.optionFields] === 'not in'  || rowData[scriptItem.optionFields] === 'notIn'"
                   remote
                   clearable
                   :disabled="valueFieldDisabled(rowData[scriptItem.optionFields])"
                   reserve-keyword
                   :remote-method="remoteMethod"
                   @focus="setTempField(rowData[scriptItem.keyFields])"
                   @blur="clearTempField"
                   size="small"
                   collapse-tags
                   filterable
                   default-first-option
                   automatic-dropdown
                   allow-create>
          <el-option v-for="fieldItem in allValueList[rowData[scriptItem.keyFields]]"
                     :key="fieldItem.id"
                     :label="fieldItem.name"
                     :value="fieldItem.id">
              <div class="more" style="display:inline-block">{{ fieldItem.name }}</div>
          </el-option>
        </el-select>
      </div>
      <div v-else-if="isAutoTaskStatus === 'assignedResource_auto_nextTicket'"
          style="width: 100%;">
        <el-select v-model="rowData[scriptItem.valueFields]"
                  style="width: 100%"
                  clearable
                  filterable
                  :disabled="rowData.disabled||valueFieldDisabled(rowData[scriptItem.optionFields])"
                  allow-create
                   collapse-tags
                  :multiple="rowData[scriptItem.optionFields] === 'in' || rowData[scriptItem.optionFields] === 'not in' || rowData[scriptItem.optionFields] === 'notIn'"
                  default-first-option>
          <el-option v-for="(option,index) in rowData.options"
                    :key="index"
                    :label="option.name"
                    :value="option.userId">
          </el-option>
        </el-select>
      </div>
      <div v-else-if="isAutoTaskStatus === 'queueID_auto_nextTicket'"
          style="width: 100%;">
        <el-select v-model="rowData[scriptItem.valueFields]"
                  style="width: 100%"
                  clearable
                  filterable
                  :multiple="rowData[scriptItem.optionFields] === 'in' || rowData[scriptItem.optionFields] === 'not in' || rowData[scriptItem.optionFields] === 'notIn'"
                   collapse-tags
                  allow-create
                  :disabled="rowData.disabled||valueFieldDisabled(rowData[scriptItem.optionFields])"
                  default-first-option>
          <el-option v-for="(option,index) in rowData.options"
                    :key="index"
                    :label="option.name"
                    :value="option.id">
          </el-option>
        </el-select>
      </div>
      <div v-else-if="isAutoTaskStatus === 'priority_auto_nextTicket'"
          style="width: 100%;">
        <el-select v-model="rowData[scriptItem.valueFields]"
                  style="width: 100%"
                  clearable
                  filterable
                  :multiple="rowData[scriptItem.optionFields] === 'in' || rowData[scriptItem.optionFields] === 'not in' || rowData[scriptItem.optionFields] === 'notIn'"
                   collapse-tags
                  allow-create
                  :disabled="rowData.disabled||valueFieldDisabled(rowData[scriptItem.optionFields])"
                  default-first-option>
          <el-option v-for="(option,index) in rowData.options"
                    :key="index"
                    :label="option.name"
                    :value="option.id">
          </el-option>
        </el-select>
      </div>
      <div v-else-if="isAutoTaskStatus === 'companyID_auto_nextTicket'"
          style="width: 100%;">
        <el-select v-model="rowData[scriptItem.valueFields]"
                  style="width: 100%"
                  clearable
                  filterable
                  remote
                  :loading="rowData.loading"
                  @change="companyIDAutoNextTicketChange"
                  :remote-method="companyIDAutoNextTicket"
                  :multiple="rowData[scriptItem.optionFields] === 'in' || rowData[scriptItem.optionFields] === 'not in' || rowData[scriptItem.optionFields] === 'notIn'"
                   collapse-tags
                  :disabled="rowData.disabled||valueFieldDisabled(rowData[scriptItem.optionFields])"
                  default-first-option>
          <el-option v-for="(option,index) in rowData.options"
                    :key="option.id"
                    :label="option.name"
                    :value="option.id">
          </el-option>
        </el-select>
      </div>
      <div v-else-if="isAutoTaskStatus === 'priority_id_nextTicket'"
          style="width: 100%;">
        <el-select v-model="rowData[scriptItem.valueFields]"
                  style="width: 100%"
                  clearable
                  filterable
                  :multiple="rowData[scriptItem.optionFields] === 'in' || rowData[scriptItem.optionFields] === 'not in' || rowData[scriptItem.optionFields] === 'notIn'"
                   collapse-tags
                  allow-create
                  :disabled="rowData.disabled||valueFieldDisabled(rowData[scriptItem.optionFields])"
                  default-first-option>
          <el-option v-for="(option,index) in rowData.options"
                    :key="index"
                    :label="option.name"
                    :value="option.id">
          </el-option>
        </el-select>
      </div>
      <div v-else-if="isAutoTaskStatus === 'owner_id_nextTicket'"
          style="width: 100%;">
        <el-select v-model="rowData[scriptItem.valueFields]"
                  style="width: 100%"
                  clearable
                  filterable
                  :multiple="rowData[scriptItem.optionFields] === 'in' || rowData[scriptItem.optionFields] === 'not in' || rowData[scriptItem.optionFields] === 'notIn'"
                   collapse-tags
                  allow-create
                  :disabled="rowData.disabled||valueFieldDisabled(rowData[scriptItem.optionFields])"
                  default-first-option>
          <el-option v-for="(option,index) in rowData.options"
                    :key="index"
                    :label="option.name"
                    :value="option.id">
          </el-option>
        </el-select>
      </div>
      <div v-else-if="isAutoTaskStatus === 'resources_id_nextTicket'"
          style="width: 100%;">
        <el-select v-model="rowData[scriptItem.valueFields]"
                  style="width: 100%"
                  clearable
                  filterable
                  :multiple="rowData[scriptItem.optionFields] === 'in' || rowData[scriptItem.optionFields] === 'not in' || rowData[scriptItem.optionFields] === 'notIn'"
                   collapse-tags
                  allow-create
                  :disabled="rowData.disabled||valueFieldDisabled(rowData[scriptItem.optionFields])"
                  default-first-option>
          <el-option v-for="(option,index) in rowData.options"
                    :key="index"
                    :label="option.name"
                    :value="option.name">
          </el-option>
        </el-select>
      </div>
      <div v-else-if="isAutoTaskStatus === 'Board_name_nextTicket'"
          style="width: 100%;">
        <el-select v-model="rowData[scriptItem.valueFields]"
                  style="width: 100%"
                  clearable
                  :multiple="rowData[scriptItem.optionFields] === 'in' || rowData[scriptItem.optionFields] === 'not in' || rowData[scriptItem.optionFields] === 'notIn'"
                   collapse-tags
                  allow-create
                  :disabled="rowData.disabled||valueFieldDisabled(rowData[scriptItem.optionFields])"
                  default-first-option>
          <el-option v-for="(option,index) in rowData.options"
                    :key="index"
                    :label="option.name"
                    :value="option.boardId">
          </el-option>
        </el-select>
      </div>
      <div v-else-if="isAutoTaskStatus === 'territory_nextTicket'"
          style="width: 100%;">
        <el-select v-model="rowData[scriptItem.valueFields]"
                  style="width: 100%"
                  clearable
                  :multiple="rowData[scriptItem.optionFields] === 'in' || rowData[scriptItem.optionFields] === 'not in' || rowData[scriptItem.optionFields] === 'notIn'"
                   collapse-tags
                  allow-create
                  :disabled="rowData.disabled||valueFieldDisabled(rowData[scriptItem.optionFields])"
                  default-first-option>
          <el-option v-for="(option,index) in rowData.options"
                    :key="index"
                    :label="option.name"
                    :value="option.id">
          </el-option>
        </el-select>
      </div>
      <div v-else>
        <el-input :style="{ width: scriptItem.valueFieldsWidth }"
                  v-model="inputValue" clearable
                  :placeholder="scriptItem.valueHint"
                  :disabled="rowData.disabled||valueFieldDisabled(rowData[scriptItem.optionFields])"></el-input>
      </div>
      </div>
    </el-tooltip>
  </div>
</template>

<script>
import mixinTypeViewModule from '@/mixins/script-type-view-module'
import { debounce } from 'lodash'
export default {
  mixins: [mixinTypeViewModule],
  props: {
    rowIndex: {
      type: String,
      default: null
    },
    isAutoTaskStatus: {
      type: String,
      default: 'empty'
    },
    filterType: {
      type: String,
      default: null
    },
    isConditionFormat: {
      type: Boolean,
      default: false
    },
    allValueList: {
      type: Object,
      default: () => { }
    },
    nextTicketType: {
      type: String,
      default: null
    },
    isRemoteObject: {
      type: Object,
      default: ()=>{}
    }
  },
  data () {
    return {
      autoTaskCheckGpModel: [],
      autoTaskChecked: false,
      checked: false,
      timeOfDayValStart: ['00:00', '23:59'],
      datetimeStatus: false,
      datetimeTabs: 'variate', // variate time
      timeTabs: 'Time',
      number: -1,
      isInclude: 'unincludes', // includes unincludes
      dateType: '',
      dateMoreList: '',
      dateMore: '',
      datePickerValue: null,
      rowData: {},
      inputValue: '',
      thisIndex: -1,
      parentIndex: -1,
      indexStr: '',
      recordCurrConditionName: '',
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: 'Nowadays',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: 'Yesterday',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: 'A week ago',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      dateEquals: ''
    }
  },
  watch: {
    allValueList (val) {
      this.checkIsSelectAll()
    },
    datetimeStatus: {
      handler: function (val) {
        if (val) {
          if ((this.rowData.value && this.rowData.value.search(/\{/) > -1) || this.optValue === 'in') {
            this.datetimeTabs = 'variate'
          } else {
            this.datetimeTabs = 'time'
          }
          document.addEventListener('mousedown', this.mouseDownListener)
        } else {
          document.removeEventListener('mousedown', this.mouseDownListener)
        }
      },
      immediate: true
    },
    rowIndex: {
      handler: function (newData) {
        this.indexStr = newData
        if (newData.indexOf('_') !== -1) {
          this.thisIndex = parseInt(newData.split('_')[0])
          this.parentIndex = parseInt(newData.split('_')[1])
        } else {
          this.thisIndex = parseInt(newData)
        }
      },
      deep: true,
      immediate: true
    },
    dataFormSub: {
      handler: function (val) {
        if (this.indexStr.indexOf('_') !== -1) {
          this.rowData = val[this.parentIndex][this.scriptItem.dataArr][this.thisIndex]
        } else {
          this.rowData = val[this.thisIndex]
        }
        this.checkedConditionExistence()
        this.recordCurrConditionName = this.rowData.key
        if (this.rowData.opt === 'timeofday' && this.rowData.value) {
          this.timeOfDayValStart[0] = this.rowData.value.replace('{', '').replace('}', '').split('~')[0].substring(0, 5)
          this.timeOfDayValStart[1] = this.rowData.value.replace('{', '').replace('}', '').split('~')[1].substring(0, 5)
        }
        if (this.rowData.value) {
          let strValue = this.rowData.value
          if (typeof strValue === 'string' && strValue.search(/\{/) > -1 && strValue.search(/\}/) > -1) {
            let expression = strValue.slice(strValue.search(/\{/) + 1, strValue.search(/\}/))
            let tempList = expression.split(/\//)
            this.dateMore = tempList[0]
            if (tempList[0] === 'last' || tempList[0] === 'next' || tempList[0] === 'current' || tempList[0] === 'previous') {
              this.dateMoreList = [tempList[0]]
            } else {
              this.dateMoreList = ['weeks', tempList[0]]
            }
            this.number = isNaN(Number(tempList[1])) ? 1 : tempList[1]
            this.dateType = tempList[2]
            this.dateEquals = tempList[0]
            tempList.length > 3 && (this.isInclude = tempList[3])
            this.datetimeTabs = 'variate'
          } else {
            this.datePickerValue = strValue
            this.datetimeTabs = 'time'
          }
        }
      },
      immediate: true,
      deep: true
    },
    recordCurrConditionName: {
      handler: function (val) {
        this.checkIsAutotaskStaus()
      },
      immediate: true,
      deep: true

    },
    rowDataVal: {
      handler: function (val) {
        this.checkedServiceBoardLinkStatus()
      },
      // immediate: true,
      deep: true
    },
    serviceBoardVal: {
      handler: function (val) {
        this.serviceBoardIsEmpty(val)
      },
      immediate: true,
      deep: true
    },
    'rowData.opt': {
      handler: function (val) {
        if (this.rowData.key === 'company/id' && (val === '!=null' || val === '=null' || !val)) {
          try {
            let arr = []
            let temarr = this.dataForm.filters.rules.filter(i=>!i.rules)
            arr.push(temarr)
            this.dataForm.filters.rules.forEach(item => {
              if(item.rules){
                arr.push(item.rules)
              }
            })
            let res = arr.find(item => item.some(i => i.id === this.rowData.id))
            if(res) {
              let r = res.find(item => item.key === 'company/id')
              let rIndex = res.findIndex(item => item.key === 'company/id')
              let p = res.find(item => item.key === 'Agreement/id')
              let pIndex = res.findIndex(item => item.key === 'Agreement/id')
              if(r&&pIndex>rIndex) {
                if (r.value && (typeof r.value === 'string')) {
                  this.getCwAgreementsOption('companyAgreements',{ 'companyIds': r.value,'opt':r.opt },p)
                } else if (r.value.length > 0 && (typeof r.value === 'object')) {
                  this.getCwAgreementsOption('companyAgreements',{ 'companyIds': r.value.join(),'opt':r.opt },p)
                } else {
                  this.getCwAgreementsOption('companyAgreements',{ 'companyIds': '','opt':r.opt },p)
                }
              }
            }
          } catch (error) {
            
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    rowDataVal () {
      return this.rowData.value
    },
    serviceBoardVal () {
      return this.dataForm[this.scriptItem.text][this.scriptItem.dataArr][0]
    },
    dataFormSub () {
      return this.dataForm[this.scriptItem.text][this.scriptItem.dataArr]
    },
    datetimeVariateMore () {
      let temp = []
      try {
        temp = window.SITE_CONFIG['dictList'].find(e => e.dictType === 'filter_variate_more').dataList
      } catch (error) { }
      return temp
    },
    datetimeVariateType () {
      let temp = []
      try {
        temp = window.SITE_CONFIG['dictList'].find(e => e.dictType === 'filter_variate_type').dataList
      } catch (error) { }
      return temp
    },
    optValue () {
      try {
        return this.rowData[this.scriptItem.optionFields]
      } catch (error) {
        return ''
      }
    },
    dateWeekEquals () {
      let temp = []
      try {
        temp = window.SITE_CONFIG['dictList'].find(e => e.dictType === 'filter_week_of_day').dataList
      } catch (error) { }
      return temp
    },
    datetimeVariateMoreTreeList () {
      let temp = []
      try {
        this.datetimeVariateMore.map(e => {
          temp.push({
            label: e.dictLabel,
            value: e.dictValue
          })
        })
        let weeks = {
          label: 'Weeks',
          value: 'weeks',
          children: []
        }
        this.dateWeekEquals.map(e => {
          weeks.children.push({
            label: e.dictLabel,
            value: e.dictValue
          })
        })
        temp.push(weeks)
      } catch (error) { }
      return temp
    },
    datetimeVariateMoreTreeListNormal () {
      let temp = []
      try {
        this.datetimeVariateMore.map(e => {
          temp.push({
            label: e.dictLabel,
            value: e.dictValue
          })
        })
      } catch (error) { }
      return temp
    }
  },
  methods: {
    serviceBoardIsEmpty: debounce(function (val) {
      if (val.key === 'board/id' && (val.opt === '!=null' || val.opt === '=null')) {
        this.getCwStatuOption({ 'boardIds': '' })
        this.getCwTeamIdOption('boardTeams',{ 'boardIds': '' },'team/id')
      }
    }),
    checkedConditionExistence () {
      if (this.rowData.currOption && this.rowData.options.length > 0) {
        if (!this.rowData.options.find(e => e.id === this.rowData.currOption.id)) {
          this.rowData.options.push(this.rowData.currOption)
        }
      }
    },
    checkedServiceBoardLinkStatus: debounce(function () {
      let value = this.dataForm[this.scriptItem.text][this.scriptItem.dataArr][0].value
      if (this.rowData.isAutoTaskStatus === 'Board_name_nextTicket' && this.rowData.key === 'board/id') {
        this.dataForm[this.scriptItem.text][this.scriptItem.dataArr].length > 1 && this.dataForm[this.scriptItem.text][this.scriptItem.dataArr].forEach(element => {
          if ((element.key === 'status/id'||element.key ==='team/id') && element.isAutoTaskStatus === 'cw_nextTicket') {
            this.$set(element, 'value', '')
            this.$set(element, 'options', [])
          }
        })
        if (value && (typeof value === 'string')) {
          this.getCwStatuOption({ 'boardIds': value,'opt':this.dataForm[this.scriptItem.text][this.scriptItem.dataArr][0].opt })
        } else if (value.length > 0 && (typeof value === 'object')) {
          this.getCwStatuOption({ 'boardIds': value.join(),'opt':this.dataForm[this.scriptItem.text][this.scriptItem.dataArr][0].opt })
        }
        if (value && (typeof value === 'string')) {
          this.getCwTeamIdOption('boardTeams',{ 'boardIds': value,'opt':this.dataForm[this.scriptItem.text][this.scriptItem.dataArr][0].opt },'team/id')
        } else if (value.length > 0 && (typeof value === 'object')) {
          this.getCwTeamIdOption('boardTeams',{ 'boardIds': value.join(),'opt':this.dataForm[this.scriptItem.text][this.scriptItem.dataArr][0].opt },'team/id')
        }

      }
      if (this.rowData.key === 'company/id') {
          try {
            let arr = []
            let temarr = this.dataForm.filters.rules.filter(i=>!i.rules)
            arr.push(temarr)
            this.dataForm.filters.rules.forEach(item => {
              if(item.rules){
                arr.push(item.rules)
              }
            })
            let res = arr.find(item => item.some(i => i.id === this.rowData.id))
            if(res) {
              let r = res.find(item => item.key === 'company/id')
              let rIndex = res.findIndex(item => item.key === 'company/id')
              let p = res.find(item => item.key === 'Agreement/id')
              let pIndex = res.findIndex(item => item.key === 'Agreement/id')
              if(r&&pIndex>rIndex) {
                if (r.value && (typeof r.value === 'string')) {
                  this.getCwAgreementsOption('companyAgreements',{ 'companyIds': r.value,'opt':r.opt },p)
                } else if (r.value.length > 0 && (typeof r.value === 'object')) {
                  this.getCwAgreementsOption('companyAgreements',{ 'companyIds': r.value.join(),'opt':r.opt },p)
                } else {
                  this.getCwAgreementsOption('companyAgreements',{ 'companyIds': '','opt':r.opt },p)
                }
              }
            }
          } catch (error) {
            
          }
          return
        }
    }, 500),
    companyIDAutoNextTicketChange (data) {
      this.rowData.currOption = this.rowData.options.find(e => e.id === data)
    },
    companyIDAutoNextTicket (query) {
      this.rowData.loading = true
      if (this.rowData.key === 'contactID') {
        this.getAutoContact({ title: query })
      } else if (this.rowData.key === 'companyID') {
        this.getWatchList({ limit: 100, name: query })
      }
    },
    tootipHander (arr, selectRow, rowData) {
      try {
        var labelFields = null
        var taskStatus = this.isAutoTaskStatus ? this.isAutoTaskStatus : ''
        var selectRowList = rowData
        if (taskStatus === 'Board_name_nextTicket') {
          selectRowList = selectRow
        }
        if (taskStatus === 'assignedResource_auto_nextTicket') {
          selectRowList = selectRow
        }
        if (taskStatus === 'priority_auto_nextTicket') {
          selectRowList = selectRow
        }
        if (taskStatus === 'companyID_auto_nextTicket') {
          selectRowList = selectRow
        }        
        if (Array.isArray(arr)) {
          labelFields = selectRowList ? this.selectTooltipViewArr(arr, selectRowList, taskStatus) : arr
        } else {
          labelFields = selectRowList ? this.selectTooltipViewStr(arr, selectRowList, taskStatus) : arr
        }
      } catch (error) {

      }
      var str = ''
      if (Array.isArray(labelFields)) {
        labelFields.forEach((i,index) => {
          if (i === undefined) {
            str += arr[index] + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<br>'
          } else {
            str += i + '&nbsp;&nbsp;&nbsp;&nbsp;' + '<br>'
          }        
        })
        return str
      } else {
        return String(labelFields) + '&nbsp;&nbsp;&nbsp;&nbsp;' || String(arr) +'&nbsp;&nbsp;&nbsp;&nbsp;'
      }
    },
    selectTooltipViewArr (arr, selectRowList, taskStatus) {
      let labelFields = null
      labelFields = arr.map(item => {
        let res1 = selectRowList.find(i => i.id === item)
        if (taskStatus === 'assignedResource_auto_nextTicket') {
          res1 = selectRowList.find(i => i.userId === item)
        }
        if (taskStatus === 'Board_name_nextTicket') {
          res1 = selectRowList.find(i => i.boardId === item)
        }
        if (taskStatus === 'resources_id_nextTicket') {
          res1 = selectRowList.find(i => i.name === item)
        }
        if (res1) {
          return res1.name
        } else {
          return res1
        }
      })
      return labelFields
    },
    selectTooltipViewStr (arr, selectRowList, taskStatus) {
      var labelFields = null
      labelFields = selectRowList.find(i => i.id === arr)
      if (taskStatus === 'assignedResource_auto_nextTicket') {
        labelFields = selectRowList.find(i => i.userId === arr)
      }
      if (taskStatus === 'Board_name_nextTicket') {
        labelFields = selectRowList.find(i => i.boardId === arr)
      }
      if (taskStatus === 'resources_id_nextTicket') {
        labelFields = selectRowList.find(i => i.name === arr)
      }
      if (labelFields) {
        return labelFields.name
      } else {
        return labelFields
      }
    },
    checkIsSelectAll () {
      if (this.isAutoTaskStatus === 'autoTask_nextTicket') this.initAllSelect()
      if (this.filterType === 'number' && !this.isConditionFormat) {
        if (this.rowData[this.scriptItem.valueFields].length === this.allValueList[this.rowData[this.scriptItem.keyFields]].length) this.checked = true
        else this.checked = false
      }
    },
    selectAll (e) {
      if (e) this.rowData[this.scriptItem.valueFields] = this.allValueList[this.rowData[this.scriptItem.keyFields]]
      else this.rowData[this.scriptItem.valueFields] = []
      if(this.allValueList[this.rowData[this.scriptItem.keyFields]][0].id) {
        this.rowData[this.scriptItem.valueFields] = this.allValueList[this.rowData[this.scriptItem.keyFields]].map(i=>i.id)
      }
    },
    autoTaskSelectAll (e) {
      if (e) {
        let arrValue = []
        let arrLabel = []
        this.scriptItem.autoTaskStatuOptionList.forEach(element => {
          arrValue.push(element.value)
          arrLabel.push(element.label)
        })
        this.autoTaskCheckGpModel = arrLabel
        this.rowData[this.scriptItem.valueFields] = arrValue
      } else {
        this.rowData[this.scriptItem.valueFields] = []
        this.autoTaskCheckGpModel = []
      }
    },
    checkboxGroupChange (val) {
      if (this.rowData[this.scriptItem.optionFields] === 'in' || this.rowData[this.scriptItem.optionFields] === 'not in') {
        if (val.length === this.allValueList[this.rowData[this.scriptItem.keyFields]].length) this.checked = true
        else this.checked = false
      }
    },
    autoTaskCheckboxGroupChange (e) {
      if (this.rowData[this.scriptItem.optionFields] === 'in' || this.rowData[this.scriptItem.optionFields] === 'not in') {
        if (this.rowData[this.scriptItem.valueFields].length === this.scriptItem.autoTaskStatuOptionList.length) {
          this.autoTaskChecked = true
          let arrLabel = []
          this.scriptItem.autoTaskStatuOptionList.forEach(element => {
            arrLabel.push(element.label)
          })
          this.autoTaskCheckGpModel = arrLabel
        } else {
          this.autoTaskChecked = false
          let arrLabel = []
          this.scriptItem.autoTaskStatuOptionList.forEach(element => {
            if (e.includes(element.value))arrLabel.push(element.label)
          })
          this.autoTaskCheckGpModel = arrLabel
        }
      } else {
        // this.rowData[this.scriptItem.valueFields] = ''
      }
    },
    valueFieldDisabled (optionFields) {
      let isDisabled = false
      switch (optionFields) {
        case 'is null':
          isDisabled = true
          break
        case '=null':
          isDisabled = true
          break
        case '!=null':
          isDisabled = true
          break
        case 'is not null':
          isDisabled = true
          break
        case "!=''":
          isDisabled = true
          break
        case "=''":
          isDisabled = true
          break
        case 'exist':
          isDisabled = true
          break
        case 'notExist':
          isDisabled = true
          break
      }
      return isDisabled
    },
    initAllSelect () {
      if (this.rowData[this.scriptItem.optionFields] === 'in' || this.rowData[this.scriptItem.optionFields] === 'not in') {
        if (this.rowData[this.scriptItem.valueFields].length === this.scriptItem.autoTaskStatuOptionList.length) {
          this.autoTaskChecked = true
          let arrLabel = []
          this.scriptItem.autoTaskStatuOptionList.forEach(element => {
            arrLabel.push(element.label)
          })
          this.autoTaskCheckGpModel = arrLabel
        } else {
          this.autoTaskChecked = false
          let arrLabel = []
          this.scriptItem.autoTaskStatuOptionList.forEach(element => {
            if (this.rowData[this.scriptItem.valueFields].includes(element.value)) arrLabel.push(element.label)
          })
          this.autoTaskCheckGpModel = arrLabel
        }
      }
    },
    checkIsAutotaskStaus () {
      if(this.nextTicketType.replace('dataset','')  === 'syncro'||this.nextTicketType.replace('dataset','')  === 'nextTicket'||this.nextTicketType.replace('dataset','')  === 'autotask'){

        if (this.rowData.key === 'status' && this.nextTicketType.replace('dataset','')  !== 'syncro') {
          this.rowData.isAutoTaskStatus = 'autoTask_nextTicket'
          this.getStatusOption({ name: 'status' })
          return
        }
        if (this.rowData.key === 'status' && this.nextTicketType.replace('dataset','')  === 'syncro') {
          this.rowData.isAutoTaskStatus = 'syncro_nextTicket_status'
          this.getSyncroStatusOption()
          return
        }
        if (this.rowData.key === 'status/id') {
          this.rowData.isAutoTaskStatus = 'cw_nextTicket'
          let value = this.dataForm[this.scriptItem.text][this.scriptItem.dataArr][0].value
          if (value && (typeof value === 'string')) {
            this.getCwStatuOption({ 'boardIds': value,'opt':this.dataForm[this.scriptItem.text][this.scriptItem.dataArr][0].opt })
          } else if (value.length > 0 && (typeof value === 'object')) {
            this.getCwStatuOption({ 'boardIds': value.join(),'opt':this.dataForm[this.scriptItem.text][this.scriptItem.dataArr][0].opt })
          }
          return
        }
        if (this.rowData.key === 'team/id') {
          this.rowData.isAutoTaskStatus = 'cw_nextTicket'
          let value = this.dataForm[this.scriptItem.text][this.scriptItem.dataArr][0].value
          if (value && (typeof value === 'string')) {
            this.getCwTeamIdOption('boardTeams',{ 'boardIds': value,'opt':this.dataForm[this.scriptItem.text][this.scriptItem.dataArr][0].opt },'team/id')
          } else if (value.length > 0 && (typeof value === 'object')) {
            this.getCwTeamIdOption('boardTeams',{ 'boardIds': value.join(),'opt':this.dataForm[this.scriptItem.text][this.scriptItem.dataArr][0].opt },'team/id')
          }
          return
        }
        if (this.rowData.key === 'Agreement/id') {
          this.rowData.isAutoTaskStatus = 'cw_nextTicket'
          try {
            let arr = []
            let temarr = this.dataForm.filters.rules.filter(i=>!i.rules)
            arr.push(temarr)
            this.dataForm.filters.rules.forEach(item => {
              if(item.rules){
                arr.push(item.rules)
              }
            })
            let res = arr.find(item => item.some(i => i.id === this.rowData.id))
            if(res) {
              let r = res.find(item => item.key === 'company/id')
              let rIndex = res.findIndex(item => item.key === 'company/id')
              let pIndex = res.findIndex(item => item.key === 'Agreement/id')
              if(r&&pIndex>rIndex) {
                if (r.value && (typeof r.value === 'string')) {
                  this.getCwAgreementsOption('companyAgreements',{ 'companyIds': r.value,'opt':r.opt },this.rowData)
                } else if (r.value.length > 0 && (typeof r.value === 'object')) {
                  this.getCwAgreementsOption('companyAgreements',{ 'companyIds': r.value.join(),'opt':r.opt },this.rowData)
                } else {
                  this.getCwAgreementsOption('companyAgreements',{ 'companyIds': '','opt':r.opt },this.rowData)
                }
              } else {
                this.getCwAgreementsOption('companyAgreements',{ 'companyIds': '','opt':'' },this.rowData)
              }
            }
          } catch (error) {
            
          }
          return
        }
        if (this.rowData.key === 'company/id') {
          this.rowData.isAutoTaskStatus = 'cw_nextTicket_company'
          // let value = this.dataForm[this.scriptItem.text][this.scriptItem.dataArr][0].value
          return
        }
        if (this.rowData.key === 'assignedResourceID') {
          this.rowData.isAutoTaskStatus = 'assignedResource_auto_nextTicket'
          this.getAssignedResourceOptionListApi()
          return
        }
        if (this.rowData.key === 'queueID') {
          this.rowData.isAutoTaskStatus = 'queueID_auto_nextTicket'
          this.getStatusOption({ name: 'queueID' })
          return
        }
        if (this.rowData.key === 'priority') {
          this.rowData.isAutoTaskStatus = 'priority_auto_nextTicket'
          this.getStatusOption({ name: 'priority' })
          return
        }
        if (this.rowData.key === 'board/id') {
          if (this.nextTicketType.replace('dataset','')  !== 'autotask') {
            this.rowData.isAutoTaskStatus = 'Board_name_nextTicket'
            this.getBoardNameList()
          }
          return
        }
        if (this.rowData.key === 'priority/id') {
          if (this.nextTicketType.replace('dataset','')  !== 'autotask') {
            this.getPrioritiesList()
            this.rowData.isAutoTaskStatus = 'priority_id_nextTicket'
          }
          return
        }
        if (this.rowData.key === 'owner/id') {
          if (this.nextTicketType.replace('dataset','')  !== 'autotask') {
            this.getCwIdentifierUser()
            this.rowData.isAutoTaskStatus = 'owner_id_nextTicket'
          }
          return
        }
        if (this.rowData.key === 'resources') {
          if (this.nextTicketType.replace('dataset','')  !== 'autotask') {
            this.getCwIdentifierUser()
            this.rowData.isAutoTaskStatus = 'resources_id_nextTicket'
          }
          return
        }
        if (this.rowData.key === 'ticketType') {
          if (this.nextTicketType.replace('dataset','')  === 'autotask') {
            this.getStatusOption({ name: 'ticketType' })
            this.rowData.isAutoTaskStatus = 'priority_auto_nextTicket'
          }
          return
        }
        if (this.rowData.key === 'issueType') {
          if (this.nextTicketType.replace('dataset','')  === 'autotask') {
            this.getStatusOption({ name: 'issueType' })
            this.rowData.isAutoTaskStatus = 'priority_auto_nextTicket'
          }
          return
        }
        if (this.rowData.key === 'ticketCategory') {
          if (this.nextTicketType.replace('dataset','')  === 'autotask') {
            this.getStatusOption({ name: 'ticketCategory' })
            this.rowData.isAutoTaskStatus = 'priority_auto_nextTicket'
          }
          return
        }
        if (this.rowData.key === 'subIssueType') {
          if (this.nextTicketType.replace('dataset','')  === 'autotask') {
            this.getStatusOption({ name: 'subIssueType' })
            this.rowData.isAutoTaskStatus = 'priority_auto_nextTicket'
          }
          return
        }
        if (this.rowData.key === 'source') {
          if (this.nextTicketType.replace('dataset','')  === 'autotask') {
            this.getStatusOption({ name: 'source' })
            this.rowData.isAutoTaskStatus = 'priority_auto_nextTicket'
          }
          return
        }
        if (this.rowData.key === 'companyID') {
          if (this.nextTicketType.replace('dataset','')  === 'autotask') {
            this.getWatchList({ limit: 100 }, this.rowData.value)
            this.rowData.isAutoTaskStatus = 'companyID_auto_nextTicket'
          }
          return
        }
        if (this.rowData.key === 'contactID') {
          if (this.nextTicketType.replace('dataset','')  === 'autotask') {
            this.getAutoContact()
            this.rowData.isAutoTaskStatus = 'companyID_auto_nextTicket'
          }
          return
        }
        if (this.rowData.key === 'territory') {
          if (this.nextTicketType.replace('dataset','')  === 'nextTicket') {
            this.getTerritory()
            this.rowData.isAutoTaskStatus = 'territory_nextTicket'
          }
          return
        }
      }
      this.rowData.isAutoTaskStatus = 'empty'
      this.$forceUpdate()
    },
    getTerritory () {
      this.$interface.apiManager.getLocationSelectListApi().then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.rowData.options = res.data
        this.$forceUpdate()
      })
    },
    getCwIdentifierUser () {
      let params = {
        enable: true
      }
      this.$interface.apiManager.getCwIdentifierUserApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.rowData.options = res.data
          this.$forceUpdate()
        })
    },
    getSyncroStatusOption () {
      this.$interface.apiManager.getSyncroStatusOption()
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.rowData.options = res.data
          this.$forceUpdate()
        })
    },
    getStatusOption (params) {
      this.$interface.apiManager.getQueueOptionList(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.rowData.options = res.data
          this.$forceUpdate()
        })
    },
    getWatchList (params, ids) {
      this.$interface.apiManager.getNewWatchListApi(params, this.nextTicketType)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.rowData.loading = false
          this.rowData.options = res.data
          if (ids && ids.length > 0) {
            const filterData = this._.filter(res.data, (o) => !ids.includes(o.id))
            const companyId = Object.prototype.toString.call(ids) === '[object Array]' ? ids.join(',') : ids
            this.$interface.apiManager.getNewWatchListApi(Object.assign({ ids: companyId }, params), this.$route.params.afterId).then(ress => {
              this.$set(this.rowData, 'options', ress.data.data.concat(filterData))
            })
          }
          this.$forceUpdate()
        })
    },
    getAutoContact (params) {
      this.$interface.apiManager.getAutoContactApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.rowData.loading = false
          this.rowData.options = res.data
          this.$forceUpdate()
        })
    },
    getCwStatuOption (params) {
      this.$interface.apiManager.getCwStatusOptionList(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.dataForm[this.scriptItem.text][this.scriptItem.dataArr].forEach(element => {
            if (element.key === 'status/id' && element.isAutoTaskStatus === 'cw_nextTicket') {
              this.$nextTick(() => { this.$set(element, 'options', res.data) })
              this.$forceUpdate()
            }
          })
          this.$forceUpdate()
        })
    },
    getCwTeamIdOption (type,params,key) {
      this.$interface.apiManager.getCwOptionList(type,params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.dataForm[this.scriptItem.text][this.scriptItem.dataArr].forEach(element => {
            if (element.key === key && element.isAutoTaskStatus === 'cw_nextTicket') {
              this.$nextTick(() => { this.$set(element, 'options', res.data) })
              this.$forceUpdate()
            }
          })
          this.$forceUpdate()
        })
    },
    getCwAgreementsOption (type,params,rowData) {
      this.$interface.apiManager.getCwOptionList(type,params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$nextTick(() => { this.$set(rowData, 'options', res.data) })
          this.$forceUpdate()
        })
    },
    getAssignedResourceOptionListApi () {
      let params = {
        type: 'autotask',
        isActive: true
      }
      this.$interface.apiManager.getAssignedResourceOptionList(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.rowData.options = res.data
          this.$forceUpdate()
        })
    },
    getBoardNameList () {
      this.$interface.apiManager.getBoardNameListApi()
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.rowData.options = res.data
          this.$forceUpdate()
        })
    },
    getPrioritiesList () {
      this.$interface.apiManager.getPrioritiesListApi(this.$store.state.user.tenantCode)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.rowData.options = res.data
          this.$forceUpdate()
        })
    },
    selectDateMore (e) {
      this.dateMore = e[e.length - 1]
    },
    selectChange () {
      this.rowData['valueJson'] = this.rowData.toObject.options.find(item => {
        if (this.rowData[this.scriptItem.valueFields] === item.value) {
          return JSON.stringify(item)
        }
      })
    },
    saveDatetime () {
      let temp = ''
      if (this.optValue === 'timeofday') {
        if (this.timeOfDayValStart) this.rowData.value = `{${this.timeOfDayValStart[0]}:00~${this.timeOfDayValStart[1]}:59}`
        this.datetimeStatus = false
        return false
      }
      if (this.datetimeTabs === 'variate') {
        if (this.dateMore === 'current') {
          if (!this.dateType) { return this.$message.error('Please select unit.') }
          this.number = 0
          temp = `{${this.dateMore}/${this.number}/${this.dateType}/${this.filterType}}`
        } else if (this.dateMore === 'previous') {
          if (!this.dateType) { return this.$message.error('Please select unit.') }
          temp = `{${this.dateMore}/${this.number}/${this.dateType}/${this.filterType}}`
        } else {
          if (this.dateMoreList[0] === 'weeks') {
            temp = `{${this.dateMore}/${this.filterType}}`
          } else {
            if (!this.dateType) { return this.$message.error('Please select unit.') }
            temp = `{${this.dateMore}/${this.number}/${this.dateType}/${this.isInclude}/${this.filterType}}`
          }
        }
      } else if (this.datetimeTabs === 'time') {
        temp = this.datePickerValue
      }
      this.rowData.value = temp
      this.datetimeStatus = false
    },
    clearDatetime () {
      this.rowData.value = ''
      this.dateEquals = ''
      this.timeOfDayValStart = null
    },
    dateTypeFormat (dateType) {
      if (dateType) {
        let temp = []
        temp = window.SITE_CONFIG['dictList'].find(e => e.dictType === 'filter_variate_type').dataList
        return temp.find(e => e.dictValue === dateType).subjectCode
      }
      return ''
    },
    mouseDownListener (event) {
      if (!event.target.closest('.block-model-dialog')) {

      } else {
        this.datetimeStatus = false
      }
    },
    remoteMethod (e) {
      this.$emit('changeValue', e, localStorage.getItem('tempFilterValue'))
    },
    setTempField (field) {
      localStorage.setItem('tempFilterValue', field)
        this.$refs.fuzzySearch.$refs.input.blur = () => {
          this.$emit('changeValue', '', localStorage.getItem('tempFilterValue'))
        };
    },
    clearTempField () {
      localStorage.removeItem('tempFilterValue')
    },
    valueIsOldData (value) {
      return Boolean(typeof value === 'string' && value.includes(','))
    }
  }
}
</script>

<style scoped>
.more {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tootipdv::-webkit-scrollbar{
  width:5px;
  height:5px;
  border-radius:5px;
}
.tootipdv::-webkit-scrollbar-track{
  background: #303133;
  border-radius:5px;
}
.tootipdv::-webkit-scrollbar-thumb{
  background: #888;
  border-radius:5px;
}
.tootipdv::-webkit-scrollbar-thumb:hover{
  background: #888;
  border-radius:5px;
}
.tootipdv::-webkit-scrollbar-track-piece {
  background: #303133;
  border-radius:5px;
}
</style>
<style>
.tootipdiv.el-tooltip__popper {
  padding-right: 0;
}
</style>
